<template>
    <SavePage v-loading="loading" :title="title">
        <template v-if="type !== 'detail'" slot="buttons">
            <BaseButton :loading="submitLoading" @click="handleSubmit">保存</BaseButton>
        </template>
        <template slot="body">
            <BaseForm2 ref="form" label-position="right" label-width="100px" :fields="fields" :text-model="textModel" :data="form" size="medium"> </BaseForm2>
        </template>
    </SavePage>
</template>

<script>
import BaseForm2 from '@/components/BaseForm2'
import { RoadConditionsModel } from '@/models'
import { RoadTypeOptions } from '@/views/technical-evaluation/constants'
import { TechnologyLevelOptions } from '@/views/auxiliary-decision/constants'
import { isNumberOrDecimals } from '@/utils/validate'

// 必填且数字或者小数
const validIsNumberOrDecimals = (rule, value, callback) => {
    if (value === '' || value === null || value === undefined) {
        callback()
    } else if (!isNumberOrDecimals(value)) {
        callback(new Error('格式错误'))
    } else {
        callback()
    }
}

export default {
    name: '',
    components: {
        BaseForm2
    },
    data() {
        return {
            title: '新增路况标准',
            type: 'add',
            id: '',
            loading: false,
            submitLoading: false,
            textModel: false,
            allDisabled: false,
            model: new RoadConditionsModel(),
            form: {},
            fields: [
                {
                    label: '',
                    children: [
                        {
                            key: 'modelName',
                            type: 'input',
                            label: '名称',
                            maxlength: '30',
                            'show-word-limit': true,
                            placeholder: '请输入',
                            rules: [
                                { required: true, message: '必填项', trigger: ['blur'] },
                                { validator: this.validUnique, trigger: ['blur'] }
                            ]
                        },
                        {
                            options: RoadTypeOptions,
                            key: 'pavementType',
                            valueKey: 'label',
                            label: '路面类型',
                            type: 'normal-select',
                            placeholder: '请选择',
                            rules: [
                                {
                                    required: true,
                                    message: '必填项',
                                    trigger: ['change']
                                }
                            ]
                        },
                        {
                            options: TechnologyLevelOptions,
                            key: 'roadType',
                            valueKey: 'label',
                            label: '技术等级',
                            placeholder: '请选择',
                            type: 'mul-select-normal',
                            rules: [
                                {
                                    required: true,
                                    message: '必填项',
                                    trigger: ['change']
                                }
                            ]
                        }
                    ]
                },
                {
                    label: 'AADT',
                    children: [
                        {
                            key: 'aadtHeavy',
                            type: 'input',
                            label: '重交通',
                            prepend: '&ge;',
                            prependSlot: true,
                            placeholder: '请输入数字',
                            rules: [
                                { required: true, message: '必填项', trigger: ['blur'] },
                                { validator: validIsNumberOrDecimals, trigger: ['blur'] }
                            ]
                        },
                        {
                            key: 'aadtMiddle',
                            type: 'input',
                            label: '中交通',
                            placeholder: '请输入数字范围，根据重交通和轻交通量来填写',
                            rules: [{ required: true, message: '必填项', trigger: ['blur'] }]
                        },
                        {
                            key: 'aadtMild',
                            type: 'input',
                            label: '轻交通',
                            prepend: '&lt;',
                            prependSlot: true,
                            placeholder: '请输入数字',
                            rules: [
                                { required: true, message: '必填项', trigger: ['blur'] },
                                { validator: validIsNumberOrDecimals, trigger: ['blur'] }
                            ]
                        }
                    ]
                },
                {
                    label: 'PCI',
                    children: [
                        {
                            key: 'pciGood',
                            type: 'input',
                            label: '优良',
                            prepend: '&ge;',
                            prependSlot: true,
                            placeholder: '请输入数字',
                            rules: [
                                { required: true, message: '必填项', trigger: ['blur'] },
                                { validator: validIsNumberOrDecimals, trigger: ['blur'] }
                            ]
                        },
                        {
                            key: 'pciMiddle',
                            type: 'input',
                            label: '中等',
                            placeholder: '请输入数字范围，根据优良和差次的数值来填写',
                            rules: [{ required: true, message: '必填项', trigger: ['blur'] }]
                        },
                        {
                            key: 'pciPoor',
                            type: 'input',
                            label: '差次',
                            prepend: '&lt;',
                            prependSlot: true,
                            placeholder: '请输入数字',
                            rules: [
                                { required: true, message: '必填项', trigger: ['blur'] },
                                { validator: validIsNumberOrDecimals, trigger: ['blur'] }
                            ]
                        }
                    ]
                },
                {
                    label: 'RQI',
                    children: [
                        {
                            key: 'rqiGood',
                            type: 'input',
                            label: '优良',
                            prepend: '&ge;',
                            prependSlot: true,
                            placeholder: '请输入数字',
                            rules: [
                                { required: true, message: '必填项', trigger: ['blur'] },
                                { validator: validIsNumberOrDecimals, trigger: ['blur'] }
                            ]
                        },
                        {
                            key: 'rqiMiddle',
                            type: 'input',
                            label: '中等',
                            placeholder: '请输入数字范围，根据优良和差次的数值来填写',
                            rules: [{ required: true, message: '必填项', trigger: ['blur'] }]
                        },
                        {
                            key: 'rqiPoor',
                            type: 'input',
                            label: '差次',
                            prepend: '&lt;',
                            prependSlot: true,
                            placeholder: '请输入数字',
                            rules: [
                                { required: true, message: '必填项', trigger: ['blur'] },
                                { validator: validIsNumberOrDecimals, trigger: ['blur'] }
                            ]
                        }
                    ]
                },
                {
                    label: 'RDI',
                    children: [
                        {
                            key: 'rdiGood',
                            type: 'input',
                            label: '优良',
                            prepend: '&ge;',
                            prependSlot: true,
                            placeholder: '请输入数字',
                            rules: [
                                { required: true, message: '必填项', trigger: ['blur'] },
                                { validator: validIsNumberOrDecimals, trigger: ['blur'] }
                            ]
                        },
                        {
                            key: 'rdiMiddle',
                            type: 'input',
                            label: '中等',
                            placeholder: '请输入数字范围，根据优良和差次的数值来填写',
                            rules: [{ required: true, message: '必填项', trigger: ['blur'] }]
                        },
                        {
                            key: 'rdiPoor',
                            type: 'input',
                            label: '差次',
                            prepend: '&lt;',
                            prependSlot: true,
                            placeholder: '请输入数字',
                            rules: [
                                { required: true, message: '必填项', trigger: ['blur'] },
                                { validator: validIsNumberOrDecimals, trigger: ['blur'] }
                            ]
                        }
                    ]
                },
                {
                    label: 'SRI',
                    children: [
                        {
                            key: 'sriEnough',
                            type: 'input',
                            label: '足够',
                            prepend: '&ge;',
                            prependSlot: true,
                            placeholder: '请输入数字',
                            rules: [
                                { required: true, message: '必填项', trigger: ['blur'] },
                                { validator: validIsNumberOrDecimals, trigger: ['blur'] }
                            ]
                        },
                        {
                            key: 'sriDeficiency',
                            type: 'input',
                            label: '不足',
                            prepend: '&lt;',
                            prependSlot: true,
                            placeholder: '请输入数字',
                            rules: [
                                { required: true, message: '必填项', trigger: ['blur'] },
                                { validator: validIsNumberOrDecimals, trigger: ['blur'] }
                            ]
                        }
                    ]
                }
            ]
        }
    },
    created() {
        this.init()
    },
    methods: {
        async init() {
            this.type = this.$route.query.type
            this.id = this.$route.query.id
            if (this.type === 'edit') {
                this.title = '编辑路况标准'
                const res = await this.getDetail()
                res.roadType = res.roadType.split(',')
                this.form = res
            } else if (this.type === 'detail') {
                this.title = this.$route.query.code + '详情'
                this.textModel = true
                this.addFormItem()
                const res = await this.getDetail()
                res.regionCode = res.provinceName + ' / ' + res.cityName + ' / ' + res.countyName + ' / ' + res.regionName
                this.form = res
            } else {
                this.title = '新增路况标准'
                console.log('新增')
            }
        },
        validUnique(rule, value, callback) {
            if (!value) {
                callback(new Error('必填项'))
            } else {
                this.model.nameCheck({ modelName: value, id: this.form.id || null }).then((res) => {
                    if (res) {
                        callback(new Error('名称已存在'))
                    } else {
                        callback()
                    }
                })
            }
        },
        getDetail() {
            this.loading = true
            return this.model.detail({ id: this.id }).finally(() => {
                this.loading = false
            })
        },
        handleSubmit() {
            this.submitLoading = true
            this.$refs['form'].validate((valid, res) => {
                if (valid) {
                    console.log('这是你刚提交的数据', res)
                    // 处理多选的技术评定
                    res.roadType = res.roadType.join(',')
                    this.id && (res.id = this.id)
                    this.model
                        .saveOrUpdate(res)
                        .then(() => {
                            this.$message({
                                type: 'success',
                                message: '操作成功！',
                                duration: 500,
                                onClose: () => {
                                    this.$router.go(-1)
                                }
                            })
                        })
                        .finally(() => {
                            this.submitLoading = false
                        })
                } else {
                    this.submitLoading = false
                    this.$message.error('校验失败！')
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped></style>
